<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="thermoCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('thermoCanvas');
        const ctx = canvas.getContext('2d');

        // Define key points for the mountain profile
        const M0 = { x: 80, y: 350 };
        const M1 = { x: 170, y: 270 };
        const M2 = { x: 320, y: 120 };
        const M3 = { x: 520, y: 350 };

        // Helper function to draw an arrow with a specific style
        function drawStyledArrow(x, y, angle) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.beginPath();
            const len = 25;
            const headLen = 15;
            ctx.moveTo(-len / 2, 0);
            ctx.lineTo(len / 2, 0);
            // Arrowhead
            ctx.moveTo(len / 2, 0);
            ctx.lineTo(len / 2 - headLen, -headLen / 2.5);
            ctx.moveTo(len / 2, 0);
            ctx.lineTo(len / 2 - headLen, headLen / 2.5);
            ctx.stroke();
            ctx.restore();
        }

        // --- Styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // --- Draw Mountain and Ground ---
        ctx.beginPath();
        // Ground line
        ctx.moveTo(0, M0.y);
        ctx.lineTo(M0.x, M0.y);
        // Mountain profile
        ctx.quadraticCurveTo(125, 320, M1.x, M1.y); // Slope to M1
        ctx.quadraticCurveTo(240, 150, M2.x, M2.y); // Slope from M1 to peak M2
        ctx.quadraticCurveTo(450, 200, M3.x, M3.y); // Slope from M2 to M3
        // Ground line
        ctx.lineTo(canvas.width, M3.y);
        ctx.stroke();

        // --- Draw Dashed Lines ---
        ctx.save();
        ctx.setLineDash([6, 4]);
        ctx.lineWidth = 1.5;
        // Base level dashed line
        ctx.beginPath();
        ctx.moveTo(M0.x, M0.y);
        ctx.lineTo(M3.x, M3.y);
        ctx.stroke();
        // M1 level dashed line
        ctx.beginPath();
        ctx.moveTo(M1.x - 30, M1.y);
        ctx.lineTo(230, M1.y);
        ctx.stroke();
        ctx.restore();

        // --- Draw h1 Height Indicators ---
        const h1_x = 240;
        const h1_arrow_len = 25;
        const h1_head_len = 8;
        ctx.save();
        ctx.lineWidth = 1.5;
        // Arrow pointing down from M1 level
        ctx.beginPath();
        ctx.moveTo(h1_x, M1.y);
        ctx.lineTo(h1_x, M1.y + h1_arrow_len);
        ctx.moveTo(h1_x - h1_head_len * 0.7, M1.y + h1_arrow_len - h1_head_len);
        ctx.lineTo(h1_x, M1.y + h1_arrow_len);
        ctx.lineTo(h1_x + h1_head_len * 0.7, M1.y + h1_arrow_len - h1_head_len);
        ctx.stroke();

        // Arrow pointing up from base level
        ctx.beginPath();
        ctx.moveTo(h1_x, M0.y);
        ctx.lineTo(h1_x, M0.y - h1_arrow_len);
        ctx.moveTo(h1_x - h1_head_len * 0.7, M0.y - h1_arrow_len + h1_head_len);
        ctx.lineTo(h1_x, M0.y - h1_arrow_len);
        ctx.lineTo(h1_x + h1_head_len * 0.7, M0.y - h1_arrow_len + h1_head_len);
        ctx.stroke();
        ctx.restore();

        // --- Draw Airflow Arrows ---
        drawStyledArrow(150, 290, -40 * Math.PI / 180); // Updraft
        drawStyledArrow(420, 240, -130 * Math.PI / 180); // Downdraft

        // --- Draw Clouds ---
        ctx.save();
        ctx.lineWidth = 1.5;
        function drawCloudArc(x, y) {
            ctx.beginPath();
            ctx.arc(x + 10, y, 10, 0.75 * Math.PI, 1.25 * Math.PI, true);
            ctx.stroke();
        }
        drawCloudArc(120, 240);
        drawCloudArc(120, 220);
        drawCloudArc(120, 200);
        drawCloudArc(120, 180);

        drawCloudArc(145, 250);
        drawCloudArc(145, 230);
        drawCloudArc(145, 210);

        drawCloudArc(170, 260);
        drawCloudArc(170, 240);
        ctx.restore();

        // --- Draw Labels ---
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // M0
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('M', M0.x, M0.y + 22);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('0', M0.x + 12, M0.y + 28);
        
        // M1
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('M', M1.x, M1.y + 22);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('1', M1.x + 12, M1.y + 28);
        
        // M2
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('M', M2.x, M2.y - 18);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('2', M2.x + 12, M2.y - 12);

        // M3
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('M', M3.x, M3.y + 22);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('3', M3.x + 12, M3.y + 28);

        // h1
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('h', 260, (M1.y + M0.y) / 2);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('1', 270, (M1.y + M0.y) / 2 + 5);

        // --- Draw Caption ---
        ctx.font = '22px "SimSun"';
        ctx.textAlign = 'center';
        ctx.fillText('热图 2.14.1', canvas.width / 2, 420);

    </script>
</body>
</html>